<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="$attrs.dialogType=='add'?`新建菜单`:`编辑菜单`" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" width="680px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="上级菜单" prop="parentId">
        <treeselect
          v-model="form.parentId"
          :options="menuOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择上级菜单"
        />
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="form.menuType">
          <el-radio :label="item.value" v-for="(item,index) in menuTypeList">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="menuNameText" prop="menuName">
        <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
      </el-form-item>
      <el-form-item label="路由地址" prop="path" v-if="form.menuType !='F'">
        <el-input v-model="form.path" placeholder="请输入路由地址"/>
      </el-form-item>
      <el-form-item label="组件路径" prop="component" v-if="form.menuType !='F'">
        <el-input v-model="form.component" placeholder="请输入组件路径"/>
      </el-form-item>
      <el-form-item label="重定向地址" prop="redirect" v-if="form.menuType !='F'">
        <el-input v-model="form.redirect" placeholder="请输入重定向地址"/>
      </el-form-item>

      <el-form-item label="排序号" prop="orderNum">
        <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
      </el-form-item>
      <el-form-item label="权限字符" prop="perms">
        <el-input v-model="form.perms" placeholder="请输入菜单权限" maxlength="100"/>
      </el-form-item>
      <el-form-item :label="iconText" prop="icon">
        <el-popover
          placement="bottom-start"
          width="460"
          trigger="click"
          @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon"/>
          <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable>
            <svg-icon
              v-if="form.icon"
              slot="prefix"
              :icon-class="form.icon"
              style="width: 25px;"
            />
            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="状态" prop="visible">
        <el-radio-group v-model="form.visible">
          <el-radio
            v-for="item in visibleList"
            :key="Number(item.value)"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleCloseDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect/index.vue'
import { reqRoleAllAdminMenu, reqAddAdminMenu, reqEditAdminMenu, reqAdminMenuInfoById } from '@/api/menuMgt/index'

export default {
  name: 'addOrEditAdminMenu',
  components: { Treeselect, IconSelect },
  data() {
    return {
      // 表单参数
      menuOptions: [],
      menuNameText: null,//菜单名称文字描述
      iconText: null,//图标文字描述
      permType: false,
      form: {
        parentId: null,
        menuType: 'C',//菜单类型
        menuName: '',//菜单名称
        path: '',//路由地址
        perms: '',//权限
        icon: '',//图标
        component: '',//路由组件地址
        orderNum: 1,
        redirect: null,//重定向地址
        visible: 0
      },
      visibleList: [
        { value: 0, label: '显示' },
        { value: 1, label: '隐藏' }
      ],
      menuTypeList: [
        { value: 'M', label: '目录' },
        { value: 'C', label: '菜单' },
        { value: 'F', label: '按钮' }
      ],
      rules: {
        parentId: [
          { required: true, message: '请选择上级菜单', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        menuType: [
          { required: true, message: '菜单类型', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        perms: [
          { required: false, message: '权限不能为空', trigger: 'blur' }
        ],
        visible: [
          { required:true, message: '请选择显示状态', trigger: 'blur' }
        ],

      }
    }
  },
  created() {
    this.getTreeselect()
    this.getMenuInfoById()
    if (this.form.menuType == 'M') {
      this.menuNameText = '目录名称'
      this.iconText = '目录图标'
    } else if (this.form.menuType == 'C') {
      this.menuNameText = '菜单名称'
      this.iconText = '菜单图标'
    } else {
      this.menuNameText = '按钮名称'
      this.iconText = '按钮图标'
    }
  },
  watch: {
    'form.menuType'(val) {
      if (val == 'M') {
        this.menuNameText = '目录名称'
        this.iconText = '目录图标'
        this.rules.perms[0].required = false;
      } else if (val == 'C') {
        this.menuNameText = '菜单名称'
        this.iconText = '菜单图标'
        this.rules.perms[0].required = false;
      } else {
        this.menuNameText = '按钮名称'
        this.iconText = '按钮图标'
        this.rules.perms[0].required = true;
      }
    }
  },
  methods: {
    getMenuInfoById() {
      if (this.$attrs.id) {
        reqAdminMenuInfoById(this.$attrs.id).then(res => {
          console.log('获取路由详情', res.data)
          this.form = res.data
        })
      }
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      reqRoleAllAdminMenu().then(res => {
        console.log('res的数据', res)
        this.menuOptions = []
        const menu = { id: 0, label: '主类目', children: [] }
        menu.children = res.data
        this.menuOptions.push(menu)

      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      if (node.children == null || node.children == 'null') {
        delete node.children
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      }
    },
    // 选择图标
    selected(name) {
      this.form.icon = name
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let url = ''
          let test = ''
          if (this.$attrs.dialogType == 'add') {
            url = reqAddAdminMenu
            test = '新增'

          } else {
            url = reqEditAdminMenu
            test = '修改'
          }
          url(this.form).then(res => {
            this.$modal.msgSuccess(test + '成功')
            this.handleCloseDialog()
            this.$emit('handleQuery')

          })
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
      this.$emit('getList') //关闭弹窗;
    }
  }
}
</script>

<style scoped lang="scss">

</style>
